<script setup lang="ts">
import {reactive, ref} from "vue";
import RedeemCodes from "@/views/Wheel/RedeemCodes.vue";
// import ZhuanPan from "@/views/Wheel/ZhuanPan.vue";
import {detail, displayTheProduct, getShowList} from "@/api/more";
import type {Showshop} from "@/api/more/model/indel";
import ZhuanPan from "@/views/Wheel/ZhuanPan.vue";

//显示遮罩层
const show = ref(false);
// tab切换
const active = ref(0);
//分享
const showShare = ref(false);
const options = [
    [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
    ],
    [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
    ],
]
let shopList=ref<any>('')
detail().then(res=>{
    console.log(res.data.prizeList)

    // shopList.value=res.data.prizeList
    if (res.code === 200){
        shopList.value = res.data.prizeList.map(item =>{
            item.turntableUrl = 'http://192.168.5.120:8199' + item.turntableUrl
            return item
        })
        shopList.value=shopList.value.slice(2,8)
    }
    console.log(shopList.value)
})
// detail().then(res=>{
//
//     console.log(res)
// })



</script>

<template>
    <div>
        <div class="box">
            <div class="Red_packet">
                <!--最上面标头部分-->
                <div class="groupTop">
                    <!--返回首页-->
                    <router-link to="/home">
                        <img src="@/assets/images/back (1).png" alt="" class="img1">
                    </router-link>
                    <span>春节幸运大转盘</span>
                    <img src="@/assets/images/tianliang.png" alt="" class="img2">
                </div>

                <!--            <div class="remainder">-->
                <!--                剩余积分10-->
                <!--            </div>-->
                <!--核心区域-->
                <!--红色背景最里面-->
                <div class="groupCenter">.
                    <!--白色背景最-->
                    <div class=White_bg>
                        <!--红色虚线圈-->
                        <div class="Dotted-line">
                            <div class="Prize-details">
                                <div style="margin-left: 70px;">
                                    <span class="text-wrapper1">——&nbsp;奖品明细&nbsp;——</span><br>
                                    <span style="font-size: 9px">一朝技术在手&nbsp;&nbsp;天下任你行走</span>
                                </div>
                                <!--                            <div class="rule">活动规则</div>-->
                                <div class="rule" >
                                    <van-button type="primary" text="活动规则" @click="show = true"  class="context"/>

                                    <van-overlay :show="show" @click="show = false" lock-scroll="true">
                                        <img src="@/assets/images/cuohao_circle.png" alt="" @click="closeCurrent" />
                                        <div class="wrapper" @click.stop>

                                            <div class="block">
                                                <van-tabs v-model:active="active" background="#fffae6" color="red" title-active-color="red" >
                                                    <van-tab title="活动规则" class="text11 roundedCorners" >
                                                        <h4>特别提示：</h4>
                                                        <p>参与活动前，请仔细阅读活动规则的各个条款，特
                                                            别是与完成活动任务、领取活动奖励以及与用户账
                                                            号异常/违规等相关的条款。用户参与本活动即视为
                                                            已充分阅读、理解本活动规则，并自愿受活动规则
                                                            的约束。</p>
                                                        <br>
                                                        <h4>详细规则：</h4>

                                                        <p>1、活动门口与活动奖励</p>
                                                        <p>1.1、活动门槛。用户参与活动，系统将赠送随机金
                                                            额的红包奖励金，活动门槛。用户参与活动，系统
                                                            将赠送随机金额的红包奖励金。</p>
                                                        <p>1.2、活动门槛。用户参与活动，系统将赠送随机金
                                                            额的红包奖励金，活动门槛。用户参与活动，系统
                                                            将赠送随机金额的红包奖励金。用户参与活动，系
                                                            统将赠送随机金额的红包奖励金。系统将赠送随机
                                                            金额的红包奖励金，活动门槛。</p>
                                                    </van-tab>
                                                    <van-tab title="抽奖记录">
                                                        <RedeemCodes></RedeemCodes>
                                                    </van-tab>
                                                </van-tabs>
                                            </div>
                                        </div>
                                    </van-overlay>
                                </div>
                            </div>
                            <!--中奖物品显示-->
                            <div class="Goods">
                                <div class="first-good" v-for="(item,index) in shopList" :key="index">
                                    <img :src="item.turntableUrl" alt="">
                                    <p class="fontStyle">{{item.goodsName}}</p>
                                </div>
                            </div>
                            <!--红包外壳-->
                            <div class="demo">
                                <!--提示中奖-->
                                <div class="promptArea">
                                    <!--                                <img src="@/assets/images/公告 拷贝.png" alt="">-->
                                    <!--&lt;!&ndash;                                <div class="sound"></div>&ndash;&gt;-->
                                    <!--                                <p>王**获得50元现金红包&nbsp;&nbsp;王**获得50元现金红包&nbsp;&nbsp;王**获得50元现金红包</p>-->
                                    <van-notice-bar
                                            left-icon="volume-o"
                                            text="王**获得50元现金红包&nbsp;&nbsp;王**获得50元现金红包&nbsp;&nbsp;王**获得50元现金红包"
                                            class="prompt"
                                    />
                                </div>
                                <!--分享-->
                                <div class="share">
                                    <van-cell    style="background-color: transparent;left: 18px">
                                        <img src="@/assets/images/-分享.png" alt="" @click="showShare = true">
                                    </van-cell>
                                    <van-share-sheet
                                            v-model:show="showShare"
                                            title="立即分享给好友"
                                            :options="options"
                                    >
                                        <div style="width: 20px;height: 20px;background-color: #c81127"></div>
                                    </van-share-sheet>

                            </div>


                                <!--大转盘-->
                                <ZhuanPan></ZhuanPan>
                                <!--                            <ZhuanPan2></ZhuanPan2>-->
                                <!--活动时间-->
                                <div class="eventTime">
                                    <p style="margin-top: 20px ;font-size: 14px">活动时间：2024.04.15~4.05.20</p>
<!--                                    <p>分享给好友并注册成功后增加抽奖次数</p>-->
<!--                                    <div class="drawRecords">抽奖记录</div>-->
                                </div>

                                <!--客服-->
<!--                                <div class="customer1">-->
<!--                                    <p>1222222221</p>-->
<!--                                </div>-->
<!--                                <div class="customer1 customer2 ">-->
<!--                                    <p>1222222221</p>-->
<!--                                </div>-->

                                <div>

                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
.fontStyle{
  font-size: 9px;
  text-align: center;
  margin-top: -8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
//活动规则 tab切换
.context{
  height: 10px;
  font-size: 9px;
  color: black;
  border-style: none;
  background-color: transparent;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .block {
    width: 300px;
    height: 350px;
    background-color: #fffae5;
    //border-radius: 20px;

    .text11{
      font-size: 10px;
      padding: 15px;
      text-align: justify;


      h4{
        color:#a25830;
        font-weight: bold;
      }

      p{
        text-indent: 1em;
        color: #a25830;
      }
    }
  }
}
.remainder{
  text-align: center;
  position: relative;
  //top: 10px;
}

.box{
  width: 375px;
  //max-height: 667px;
    height: 100vh;
    background-repeat: no-repeat;
  background-image: url("@/assets/images/beijing1.png");
  //background-size: 375px 667px;
    background-size: 100% 100%;

  .Red_packet{
    width: 375px;
    height: 667px;
    background-image: url("@/assets/images/beijing2.png");
    background-size: 375px 450px;
    background-repeat: no-repeat;

    .groupTop{
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .img1{
        width: 16px;
        height: 16px;
        margin-left: 20px;
      }
      span{
        color: white;
        font-size: 13px;
        font-weight: 600;
        font-family: '微软雅黑';
        margin-left: 40px;
      }
      .img2{
        width: 50px;
        height: 20px;
        margin-right: 10px;
      }

    }
    .groupCenter{
      width: 330px;
      height: 500px;
      margin: 120px auto 0;
      background-image: url("@/assets/images/Redbeijing1.png");
      background-size: 330px 400px;
      background-repeat: no-repeat;


      .White_bg{
        width: 290px;
        height: 300px;
        //margin: auto;
        border-radius: 20px 20px 0 0;
        background-color: #fffefb;
        position: fixed;
        top: 80px;
        left: 42.5px;

        .Dotted-line{
          width: 270px;
          height: 280px;
          margin: 10px auto 0;
          border: 1px dashed #ff003f;
          border-radius: 20px 20px 0 0;

          .Prize-details{
            display:flex;
            justify-content: space-between;
            //align-items: center;
            height: 50px;
            //background-color: #c81127;

            span{
              font-size: 10px;
              //text-align: center;
            }
            .text-wrapper1{
              margin-left: 15px;
            }

            .rule{
              height: 20px;
              padding: 3px;
              color:#f80000;
              font-size: 8px;
              margin-right: 10px;
              margin-top: 10px;
              border:1px solid #ff422e;
              border-radius: 10px;

                img{
                    width: 30px;
                    height: 30px;
                    position: fixed;
                    right: 40px;
                    top: 110px;
                }
            }
          }
          //红包外壳
          .demo{
            width: 330.5px;
            height: 500px;
            background-image: url("@/assets/images/22ce154e47444f9799905891bedf5237_mergeImage.png");
            background-size: 330.5px 420px;
            background-repeat: no-repeat;
            position: relative;
            //left: -
              left: -12%;
            top:-30px;
                        //分享
                        .share{
                            //font-size: 10px;
                            position: absolute;
                            left: 20px;
                            right: -5px;
                            top: 80px;
                        }

                        .revise{
                            width: 55px;
                            height: 55px;
                            text-align: center;
                            //font-size: 5px;
                            background-color: #ffe2a1;
                            border-radius: 50%;
                            box-shadow: 0px 0px 24px 0px rgba(241, 23, 62, 0.3);
                        }

                        //提示中奖
                        //.promptArea{
                        //    width: 310px;
                        //    height: 25px;
                        //    margin: auto;
                        //    border-radius: 10px;
                        //    background-color: black;
                        //    opacity: 0.3;
                        //    position: relative;
                        //    top:40px;
                        //    display: flex;
                        //    overflow: hidden;
                        //
                        //    img{
                        //        width: 13px;
                        //        height: 12px;
                        //        margin-left: 10px;
                        //        margin-top: 5px;
                        //    }
                        //
                        //    .sound{
                        //        width: 13px;
                        //        height: 12px;
                        //        background-image: url("@/assets/images/公告 拷贝.png");
                        //        background-repeat: no-repeat;
                        //        background-size: 13px 12px;
                        //    }
                        //
                        //    p{
                        //        width: 260px;
                        //        color:white;
                        //        font-size: 10px;
                        //        line-height: 25px;
                        //        margin-left: 10px;
                        //    }
                        //}

                        //提示中奖
                        .prompt{
                            position: relative;
                            top: 40px;
                            height: 25px;
                            color: white;
                            border-radius: 10px;
                            font-size: 12px;
                            background-color: rgba(0,0,0,0.5);
                        }
                        //活动时间
                        .eventTime{
                            text-align: center;
                            font-size: 10px;
                            margin-top: 10px;

                            .drawRecords{
                                width: 60px;
                                height: 20px;
                                margin: auto;
                                border:1px solid black;
                                border-radius: 10px;
                            }
                        }
                    }
                }
                //商品显示
                .Goods{
                    width: 210px;
                    height: 120px;
                    margin: auto;
                    //background-color: #c81127;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-evenly;

                    .first-good{
                        width: 70px;
                        height: 70px;
                        //background-color: aqua;

                        img{
                            width: 60px;
                            height: 50px;
                        }
                    }
                }
            }

        }
    }
}

</style>